<script setup>
  import { reactive, ref } from 'vue';
  import {ElMessage} from "element-plus"
  // 1.创建数据源
  const data = reactive({
    userName: "",
    password: ""
  })
  // 2.创建校验规则对象
  const rules = ref({
    userName: [
      {required: true, message: "用户名不能为空！", trigger: "blur"},
      {min: 6, max: 12, message: "用户名长度为6-12之间！", trigger: "blur"}
    ],
    password: [
    {required: true, message: "密码不能为空！", trigger: "blur"},
    {min: 8, max: 16, message: "密码长度为8-16之间！", trigger: "blur"}
    ]
  })

  // 全局校验
  const formRef = ref(null)

  // 1.登录校验
  const onLogin = () => {
    formRef.value.validate((result) => {
      // 错误提示
      if(!result) {
        ElMessage.error('账号或密码非法!')
      }
      // 通过则执行后续逻辑
      console.log("ok")
    })
  }
  // 2.重置
  const onCancel = () => {
    formRef.value.resetFields()
  }

</script>

<template>
  <div class="login-box">
    <el-form
    :model="data"
    :rules="rules"
    ref="formRef">
    <!-- 账号 -->
      <el-form-item label="账号：" prop="userName">
        <el-input 
        placeholder="请填写用户名"
        prefix-icon="User"
        v-model="data.userName"></el-input>
      </el-form-item>
    <!-- 密码 -->
      <el-form-item label="密码：" prop="password">
        <el-input 
        placeholder="请填写密码"
        type="password"
        show-password
        prefix-icon="Lock"
        v-model="data.password"></el-input>
      </el-form-item>
    <!-- 按钮 -->
      <el-form-item>
        <el-button type="primary" @click="onLogin()">登 录</el-button>
        <el-button @click="onCancel()">重 置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    background-color: #ccc;
  }
  #app {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-box {
    width: 450px;
    padding: 20px;
    padding-top: 40px;
    box-shadow: 8px 14px 8px 1px rgba(0, 0, 0, 0.5);
  }
  .login-box {
    background-color: #fff;
  }
  .login-box .el-input {
    margin-bottom: 5px;
  }
</style>